﻿@{
    ViewBag.Title = "ResetPwd";
    Layout = "~/Views/Shared/Login_Layout.cshtml";
}
@section ForgetRegisterStyle {
    <style>
        #tabs {
            overflow: hidden;
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
        }

            #tabs li {
                float: left;
                margin: 0 -15px 0 0;
            }

            #tabs a {
                float: left;
                position: relative;
                padding: 0 58px;
                height: 0;
                line-height: 30px;
                text-transform: uppercase;
                text-decoration: none;
                color: #fff;
                border-right: 30px solid transparent;
                border-bottom: 30px solid #3D3D3D;
                border-bottom-color: #777\9;
                opacity: .3;
                filter: alpha(opacity=30);
            }

                #tabs a:hover,
                #tabs a:focus {
                    border-bottom-color: #2ac7e1;
                    opacity: 1;
                    filter: alpha(opacity=100);
                }

                #tabs a:focus {
                    outline: 0;
                }

            #tabs #current {
                z-index: 3;
                border-bottom-color: #3d3d3d;
                opacity: 1;
                filter: alpha(opacity=100);
            }
        /* ----------- */
        #content {
            border-top: 2px solid #3d3d3d;
            padding: 2em;
            /*height: 220px;*/
        }

            #content input {
                height: 35px;
            }

            #content h2,
            #content h3,
            #content p {
                margin: 0 0 15px 0;
            }
        /* Demo page only */
        #about {
            color: #999;
            text-align: center;
            font: 0.9em Arial, Helvetica;
        }

            #about a {
                color: #777;
            }
    </style>
}
<div style="height: 300px;width: 100%;background-image:url(../../Images/login-bg.png);line-height:300px;">
    <div style="height: 500px;width: 58%;margin:auto;margin-top:-30px;position:absolute;left:300px;">
        <ul id="tabs">
            <li>
                <a href="#" name="#tab1">填写账户名</a>
            </li>
            <li>
                <a href="#" name="#tab2">验证身份</a>
            </li>
            <li>
                <a href="#" name="#tab3">设置新密码</a>
            </li>
            <li>
                <a href="#" name="#tab4">完成</a>
            </li>
        </ul>
        <form action="@Url.Action("ValidateCount")">
            <div id="content">
                <div id="tab1">
                </div>
                <div id="tab2">
                </div>
                <div id="tab3">
                    <table style="margin-left:-50px;margin-top:30px;">
                        <tr>
                            <td align="right">新登录密码：</td>
                            <td align="left"><input name="AccountPwd" id="AccountPwd" type="password" required="required" placeholder="请输入您的新密码" style="width:250px;" /></td>
                            <td align="left" style="color:#333333;padding-left:4px"> @Html.ValidationMessage("AccountPwd")</td>
                        </tr>
                        <tr>
                            <td align="right">确认新密码：</td>
                            <td align="left"><input name="AccountRepeat" type="password" equalto="#AccountPwd" id="AccountRepeat" placeholder="请再次输入密码" style="width:250px;" /></td>
                            <td align="left" style="color:#333333;padding-left:4px"> @Html.ValidationMessage("AccountRepeat")</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td align="left"><button type="button" style="width:160px;height:25px;" onclick="NextStep(3)">确认</button></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
                <div id="tab4">
                    <table style="margin-left:-50px;margin-top:30px;">
                        <tr>
                            <td></td>
                            <td align="left" style="line-height: 20px;font-size:12px;font-weight: bold;color:#009900">新密码设置成功!</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td align="left" style="color:#fff;line-height: 20px;font-size:12px;">请牢记您新设置的密码。<a href="@Url.Action("Index")">返回登陆</a></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    function resetTabs() {
        $("#content > div").hide(); //Hide all content
        $("#tabs a").attr("id", "2"); //Reset id's
    }
    function NextStep(id) {
        $.post(
            "@Url.Action("ChangePwd")",
            { "loginID": "@ViewBag.AccountID", "pwd": $('#AccountPwd').val() },
            function (data) {
                if (data == "True") {
                    var temp = $('#tabs a').eq(id);
                    if ($(temp).attr("id") == "current") { //detection for current tab
                        return
                    }
                    else {
                        resetTabs();
                        $(temp).attr("id", "current"); // Activate this
                        $($(temp).attr('name')).fadeIn(); // Show content for current tab
                    }
                }
            });
    }
    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2
    var myUrlTabName = myUrlTab.substring(0, 4); // For the above example, myUrlTabName = #tab
    (function () {
        $("#content > div").hide(); // Initially hide all content
        $("#tabs li:eq(2) a").attr("id", "current"); // Activate first tab
        $("#content > div:eq(2)").fadeIn(); // Show first tab content

        for (i = 1; i <= $("#tabs li").length; i++) {
            if (myUrlTab == myUrlTabName + i) {
                resetTabs();
                $("a[name='" + myUrlTab + "']").attr("id", "current"); // Activate url tab
                $(myUrlTab).fadeIn(); // Show url tab content
            }
        }
    })()
</script>